<template>
  <el-main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="付款单编号">
          <el-input v-model="formInline.payOrderNo" placeholder="付款单编号"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="formInline.ownerName" placeholder="业主姓名"></el-input>
        </el-form-item>
        <el-form-item label="付款状态">
          <el-select v-model="formInline.payState" placeholder="付款状态">
            <el-option :label="item" :value="item" v-for="item in payStateAll"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账单类型">
          <el-select v-model="formInline.billType" placeholder="账单类型">
            <el-option :label="item" :value="item" v-for="item in billTypeAll"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同编号查询">
          <el-input v-model="formInline.contractNo" placeholder="合同编号查询"></el-input>
        </el-form-item>
        <el-form-item label="付款日期">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="paymentList">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>

    <!--选择账单-->
    <el-tabs  v-model="activeTab" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="收房付款单" name="home">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="contractNo"
              label="收房合同号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="houseName"
              label="房产信息"
              width="180">
            </el-table-column>
            <el-table-column
              prop="ownerName"
              label="业主姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="支付金额"
              width="180">
            </el-table-column>
            <el-table-column
              label="账期"
              width="180">
              <template slot-scope="scope">
                第{{scope.row.payNumber}}期
              </template>
            </el-table-column>
            <el-table-column
              prop="payState"
              label="付款状态"
              width="180">
            </el-table-column>
            <el-table-column
              prop="billType"
              label="账单类型"
              width="180">
            </el-table-column>
            <el-table-column
              prop="payableDate"
              label="应付日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paidTime"
              label="付款日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="payMethod"
              label="支付方式"
              width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span v-if="scope.row.payMethod!=null">
                  --
                </span>
                <el-button
                  size="mini"
                  @click="handlePayment(scope.row)" type="text"
                  v-if="scope.row.payMethod==null">支付</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>

      <el-tab-pane label="租务付款单" name="rookery">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="contractNo"
              label="收房合同号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="houseName"
              label="房产信息"
              width="180">
            </el-table-column>
            <el-table-column
              prop="ownerName"
              label="业主姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="支付金额"
              width="180">
            </el-table-column>
            <el-table-column
              label="账期"
              width="180">
              <template slot-scope="scope">
                第{{scope.row.payNumber}}期
              </template>
            </el-table-column>
            <el-table-column
              prop="payState"
              label="付款状态"
              width="180">
            </el-table-column>
            <el-table-column
              prop="billType"
              label="账单类型"
              width="180">
            </el-table-column>
            <el-table-column
              prop="payableDate"
              label="应付日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paidTime"
              label="付款日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="payMethod"
              label="支付方式"
              width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span v-if="scope.row.payMethod!=null">
                  --
                </span>
                <el-button
                  size="mini"
                  @click="handlePayment(scope.row)" type="text"
                  v-if="scope.row.payMethod==null">支付</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>

      <el-tab-pane label="金融服务付款单" name="finance">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="contractNo"
              label="收房合同号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="houseName"
              label="房产信息"
              width="180">
            </el-table-column>
            <el-table-column
              prop="ownerName"
              label="业主姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="支付金额"
              width="180">
            </el-table-column>
            <el-table-column
              label="账期"
              width="180">
              <template slot-scope="scope">
                第{{scope.row.payNumber}}期
              </template>
            </el-table-column>
            <el-table-column
              prop="payState"
              label="付款状态"
              width="180">
            </el-table-column>
            <el-table-column
              prop="billType"
              label="账单类型"
              width="180">
            </el-table-column>
            <el-table-column
              prop="payableDate"
              label="应付日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="paidTime"
              label="付款日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="payMethod"
              label="支付方式"
              width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span v-if="scope.row.payMethod!=null">
                  --
                </span>
                <el-button
                  size="mini"
                  @click="handlePayment(scope.row)" type="text"
                  v-if="scope.row.payMethod==null">支付</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
    </el-tabs>

    <!--分頁工具-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageNum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <!--支付页面-->

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="支付金额">
          <el-input v-model="form.paymentAmount" disabled></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="form.payMethod" placeholder="请选择支付方式">
            <el-option :label="item" :value="item" v-for="item in payMethodAll"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="settles">确 定</el-button>
  </span>
    </el-dialog>


    <div>

    </div>


  </el-main>
</template>

<script>
  import { paymentList,payStateList,billTypeList,payMethodList,settles } from "@/api/finance/payment/finance";

    export default {
        data(){
          return{
            //默认选中
            activeTab:'home',
            //展示内容
            tableData:[],
            //查询条件
            formInline:{
              //默认查询收房付款单
              state : 1,
              pageNum:1,
              pageSize:2,
              //区间查询参数
              begintime:null,
              endtime:null
            },
            total:null,
            //时间选择器
            value1:[],
            //付款类型
            payStateAll:[],
            //账单类型
            billTypeAll:[],
            //支付方式
            payMethodAll:[],
            //支付页面 是否显示
            dialogVisible: false,
            //支付数据
            form:{
              //支付金额
              paymentAmount:null,
              //订单号
              id:null
            },
          }
        },
        methods:{
          //选择账单方法
          handleClick(tab, event){
            //console.log("查询的付款单为:",tab.name);
            //根据名称查询 付款单
            //收房付款单
            if (tab.name=='home'){
              this.formInline.state = 1

            }
            //租务付款单
            if (tab.name=='rookery'){
              this.formInline.state = 2
            }
            //金融付款单
            if (tab.name=='finance'){
              this.formInline.state = null
            }
            console.log(tab.name,this.formInline.state)
            this.formInline.pageNum = 1
            this.formInline.pageSize = 2
            this.paymentList();
          },
          //查询账单
          paymentList(){
            if (this.value1.length>0){
                this.formInline.begintime =this.value1[0]
                this.formInline.endtime =this.value1[1]
            }
            paymentList(this.formInline).then(res=>{
              //console.log(res);
              this.tableData = res.list;
              this.total = res.total;
            })
          },
          //重置方法
          resetForm(){
            this.formInline={
              //默认查询收房付款单
              state : null,
              pageNum:1,
              pageSize:2,
              //区间查询参数
              begintime:null,
              endtime:null
            }
            //收房付款单
            if (this.activeTab=='home'){
              this.formInline.state = 1
            }
            //租务付款单
            if (this.activeTab=='rookery'){
              this.formInline.state = 2
            }
            //金融付款单
            if (this.activeTab=='finance'){
              this.formInline.state = null
            }
            console.log(this.formInline)
          },

          handleSizeChange(val) {
            this.formInline.pageSize =val
            this.formInline.pageNum = 1;
            this.paymentList();
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            this.formInline.pageNum = val;
            this.paymentList();
            console.log(`当前页: ${val}`);
          },
          //付款类型
          payStateList(){
            payStateList().then(res=>{
              this.payStateAll = res
            })
          },
          //账单类型
          billTypeList(){
            billTypeList().then(res=>{
              this.billTypeAll = res
            })
          },
          //获取所有支付方式
          payMethodList(){
            payMethodList().then(res=>{
              this.payMethodAll = res;
            })
          },
          //支付页面
          handlePayment(row){
            console.log(row.paymentAmount)
            this.form.paymentAmount = row.paymentAmount
            this.form.id = row.id
            this.dialogVisible = true;
          },
          //支付方法
          settles(){
            settles(this.form).then(res=>{
              console.log(res)
              const div = document.createElement('div');
              div.innerHTML = res;
              document.body.appendChild(div)
              document.forms[2].submit();
            })
          },

          handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
          }
        },
        created() {
          this.paymentList();
          this.payStateList();
          this.billTypeList();
          this.payMethodList();
        }
    }
</script>

<style scoped>

</style>
